<template>
  <chart-card
    :title="'车均充电电量'"
    :extraType="'drop'"
    @changeDate="changeDate"
  >
    <a-row type="flex" justify="space-between">
      <template v-for="(item, idx) in pieData">
        <Charts
          :key="idx"
          :chartData="item"
          :chartType="'chargeAmount'"
          class="echartsMap"
        />
      </template>
    </a-row>
  </chart-card>
</template>

<script>
import Charts from "../charts/Charts";
import { ChartCard } from "./components";
import { getChargingAmount } from "@/services/home";

export default {
  name: "ChargingAmount",
  data() {
    return {
      pieData: [
        {
          label: "充电开始电量",
          value: 22.4,
          total: 100
        },
        {
          label: "充电结束电量",
          value: 93.5,
          total: 100
        }
      ]
    };
  },
  mounted() {
    // this.getPieData()
  },
  components: {
    Charts,
    ChartCard
  },
  props: {
    title: String,
    loading: Boolean,
    type: String
  },
  methods: {
    changeDate(val) {
      this.getPieData(val);
    },
    async getPieData(val = "本周") {
      let params = {
        date: val
      };
      const {
        data: { data, code }
      } = await getChargingAmount(params);
      if (code === 200) {
        this.pieData = data;
      }
    }
  }
};
</script>

<style scoped lang="less">
.echartsMap {
  width: 40%;
  height: 120px;
}
</style>
